<template>
	<div>
		<p-page-header title="修改密码"></p-page-header>
		<el-form size="mini"
			:model="userInfo"
			ref="queryForm"
			:rules="rules"
			label-width="auto">
			<el-form-item label="账号" >
				{{userInfo.username}}
			</el-form-item>
			<el-form-item label="原密码" prop="oldPassword">
				<el-input placeholder="请输入原密码"
					clearable
					
					v-model="userInfo.oldPassword"
					type="password"
					></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="password">
				<el-input placeholder="请输入新密码"
					clearable
					type="password"
					v-model="userInfo.password"></el-input>
			
			</el-form-item>
			<el-form-item label="确认密码" prop="password1">
				<el-input placeholder="请输入确认密码"
					clearable
					type="password"
					v-model="userInfo.password1"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"
					@click="handleSubmit">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {changePass} from '@/api/user-api.js'
	export default{
		name:'password',
		data(){
			let _this = this
			return {
				userInfo:{},
				rules:{
					oldPassword:[
						{required:true,message:'原密码不可以为空'}
					],
					password:[
						{required:true,message:'新密码不可以为空'}
					],
					password1:[
						{required:true,message:'确认密码不可以为空'},
						{
							validator(rules,value,callback){
								if(value!=_this.userInfo.password){
									callback(new Error('两次输入的密码不一致'))
								}
								callback()
							}
						}
					],
				}
			}
			
		},
		created(){
			this.userInfo = JSON.parse(sessionStorage.userInfo)
		},
		activated(){
			this.userInfo = JSON.parse(sessionStorage.userInfo)
		},
		methods:{
			async handleSubmit(){
				let r = await this.$refs.queryForm.validate().catch(err => err)
				if(r){
					let res = await changePass(this.userInfo)
					if(res.data.code == 200){
						sessionStorage.clear()
						this.$router.push("/login")
					}
				}
			}
		}
		
	}
</script>

<style>
</style>
